<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			<h3>局部组件1name</h3>
			<jubu-component1></jubu-component1>

			
			<hr >
			<h3>在局部组件2中，调用局部组件1</h3>
			<jubu-component2></jubu-component2>
			
		</div>

		
		<template id="jubuTemplate1">
			<div>
				{{name}}
			</div>
		</template>
		<template id="jubuTemplate2">
			<div>
				{{name}}
				<jubu-component1></jubu-component1>
			</div>
		</template>
		
		
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">

			
			//定义局部组件1
			let jubuComponent1 = {
				data: function(){
					return{
						name: "局部组件1"
					}
				},
				template:"#jubuTemplate1",
				methods:{}
			}
			
			//定义局部组件2
			let jubuComponent2 = {
				data: function(){
					return{
						name: "局部组件2"
					}
				},
				template:"#jubuTemplate2",
				methods:{
				},
				/* 
				实现功能：
					在局部组件2中调用，局部组件1的组件
				
				第一步：
					在局部组件2中，添加components:{}
				第二步：
					在components中，写入组件1的id
				第三步：
					在组件2的template中，调用组件1的标签
					
				 
				 */
				components:{
					jubuComponent1
				}
			}
			
			
			
			const vue  = new Vue({
				el: "#app",
				data:{},
				methods:{},
				mounted() {
					
				},
				//1、局部组件
				components:{
					jubuComponent1,
					jubuComponent2
				}
			})
		</script>
		
	</body>
</html>
